<template>
  <div class="data-engine-page">
    <el-card>
      <template #header>
        <div class="header-bar">
          <span>数据源配置列表</span>
          <el-button type="primary" size="small" @click="openDialog()">新增数据源</el-button>
        </div>
      </template>

      <el-table :data="dataSources" border stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="driver" label="驱动类型" width="120" />
        <el-table-column prop="ip" label="IP地址" width="150" />
        <el-table-column prop="port" label="端口" width="80" />
        <el-table-column prop="database" label="数据库" width="120" />
        <el-table-column prop="version" label="版本号" width="80" />
        <el-table-column label="连接状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'connected' ? 'success' : 'danger'">
              {{ row.status === 'connected' ? '已连接' : '未连接' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" width="140">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog(row)">编辑</el-button>
            <el-button type="danger" link @click="confirmDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="editRow ? '编辑数据源' : '新增数据源'" width="500px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="驱动类型">
          <el-input v-model="form.driver" />
        </el-form-item>
        <el-form-item label="IP 地址">
          <el-input v-model="form.ip" />
        </el-form-item>
        <el-form-item label="端口">
          <el-input v-model="form.port" />
        </el-form-item>
        <el-form-item label="数据库">
          <el-input v-model="form.database" />
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="form.version" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDataSource">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="deleteDialogVisible" title="删除确认" width="400px">
      <div>确定要删除该数据源“{{ deleteTarget?.name }}”吗？</div>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="deleteDataSource">确认删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const editRow = ref(null)
const deleteTarget = ref(null)
const form = ref({
  driver: '', ip: '', port: '', database: '', version: '', remark: ''
})

const dataSources = ref([
  { id: 1, name: 'SQLite-monitoring', driver: 'SQLite', ip: '10.162.48.165', port: '1433', database: 'monitoring', version: '1.8', status: 'connected', remark: '全国由于只有.' },
  { id: 2, name: 'PostgreSQL-user_center', driver: 'PostgreSQL', ip: '192.168.51.185', port: '6379', database: 'user_center', version: '7.7', status: 'disconnected', remark: '任何一些一定.' },
  { id: 3, name: 'Oracle-iot_data', driver: 'Oracle', ip: '172.29.212.234', port: '1521', database: 'iot_data', version: '8.8', status: 'connected', remark: '更新帮助这是一些.' },
  { id: 4, name: 'MySQL-user_center', driver: 'MySQL', ip: '172.21.18.25', port: '1433', database: 'user_center', version: '3.8', status: 'connected', remark: '深圳相关.' },
  { id: 5, name: 'MySQL-cloud_meta', driver: 'MySQL', ip: '172.24.109.226', port: '1433', database: 'cloud_meta', version: '11.6', status: 'connected', remark: '世界解决.' },
  { id: 6, name: 'SQLServer-finance_db', driver: 'SQLServer', ip: '10.127.182.84', port: '3306', database: 'finance_db', version: '3.1', status: 'connected', remark: '今年可以日期.' },
  { id: 7, name: 'SQLServer-user_center', driver: 'SQLServer', ip: '172.19.58.11', port: '5432', database: 'user_center', version: '1.7', status: 'disconnected', remark: '这是社会方面.' },
  { id: 8, name: 'MySQL-finance_db', driver: 'MySQL', ip: '172.24.230.13', port: '5432', database: 'finance_db', version: '6.8', status: 'connected', remark: '以及进入.' },
  { id: 9, name: 'SQLite-user_center', driver: 'SQLite', ip: '192.168.137.181', port: '6379', database: 'user_center', version: '2.8', status: 'disconnected', remark: '所以如此.' },
  { id: 10, name: 'MySQL-cloud_meta', driver: 'MySQL', ip: '192.168.160.241', port: '1433', database: 'cloud_meta', version: '9.3', status: 'connected', remark: '大小事情.' }
])

function openDialog(row = null) {
  dialogVisible.value = true
  editRow.value = row
  form.value = row ? { ...row } : { driver: '', ip: '', port: '', database: '', version: '', remark: '' }
}

function saveDataSource() {
  if (editRow.value) {
    Object.assign(editRow.value, form.value)
    ElMessage.success('修改成功')
  } else {
    const id = dataSources.value.length + 1
    dataSources.value.push({ id, ...form.value, name: `${form.value.driver}-${form.value.database}`, status: 'connected' })
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

function confirmDelete(row) {
  deleteTarget.value = row
  deleteDialogVisible.value = true
}

function deleteDataSource() {
  if (deleteTarget.value) {
    dataSources.value = dataSources.value.filter(item => item.id !== deleteTarget.value.id)
    ElMessage.success('删除成功')
    deleteDialogVisible.value = false
  }
}
</script>

<style scoped>
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>